<template>
   <div>
       <div id="head">
      <!-- 电影图片栏    -->
            <div id="movie-header">
               <img id="pic" :src="onMovie.fnImg">
                  <!--电影简介 -->
                  <div id="box1">
                   <h1>{{onMovie.fnName}}</h1>
                   <span>导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演:&nbsp;{{onMovie.fnDirector}}</span><br>
                   <span>领衔主演:&nbsp;{{onMovie.fnActor}}</span><br>
                   <span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型:&nbsp;{{onMovie.fnType}}</span><br>
                   <span>国家/地区:&nbsp;{{onMovie.fnCountry}}</span><br>
                   <span>片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长:&nbsp;{{onMovie.fnTime}}&nbsp;分钟</span><br>
                   <span>语&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;言:&nbsp;{{onMovie.fnLanguage}}</span><br>
                  </div>
            </div>
                  <div id="box2">
                    <el-button type="primary" id="butt1" class="butt" @click="tobuy(onMovie.fnId)">排片购票</el-button>
                    <el-button  class="butt" id="butt2" @click="moviesIntroduce(onMovie)">影片介绍</el-button>
                    <hr style="background-color: #409EFF; margin-top: -1px;color: blue;margin-left: 100px;height: 3px">
                  </div>
                  <!-- 观影时间       +           买票页 -->
       </div>
       <div id="body">
         <router-view></router-view>
       </div>
   </div>
</template>
<script>
    export default {
        name: "BuyTicket",
        data(){
            return{
                onMovie:{
                    id:'',
                    fnId:'',
                    fnName:'',
                    fnDirector:'',
                    fnPrice:'',
                    fnActor:'',
                    fnIntro:'',
                    fnScore:'',
                    fnImg:'',
                    fnSence:'',
                    fnCountry:'',
                    fnType:'',
                    fnLanguage:'',
                    fnPic:''
                }
            }
        },
        methods: {
           tobuy(FnId){
               console.log("==========================");
              // var fnprice = this.onMovie.fnPrice;
              // console.log('=========='+fnprice);
              //  var fnLanguage = this.onMovie.fnLanguage;
               var da = new Date();
               var m = da.getMonth()+1;
               var d = da.getDate();
               var jt = m + "月" + d + "日";
               var mt = m + "月"+ (d+1) + "日";
               var ht = m + "月"+ (d+2) + "日";
               var dateInfor = { Today:jt,
                                 Tomorrow:mt,
                                 atomorrow:ht,
                                  fnId:FnId,
                                  fTime:this.onMovie.fnTime
                                  // fnPrice:fnPrice,
                                  // fnLanguage:fnLanguage
               };

               this.$router.push({name:'SellingTickets',params:{'dateInfor':dateInfor}})
           },
            moviesIntroduce(onMovie){
                console.log(onMovie);
                this.$router.push({name:'MovieIntroduce',params:{'onMovie':onMovie}});

            },
            SceneInfor(){
                // console.log('1')
                this.onMovie = this.$route.params.onMovie;
                console.log(this.onMovie)
                // console.log('1')
                var da = new Date();
                var m = da.getMonth()+1;
                var d = da.getDate();
                var jt = m + "月" + d + "日";
                var mt = m + "月"+ (d+1) + "日";
                var ht = m + "月"+ (d+2) + "日";
                var dateInfor = {
                    Today:jt,
                    Tomorrow:mt,
                    atomorrow:ht,
                    fnId:this.onMovie.fnId,
                };
                // console.log("aaaaaaa"+this.onMovie.fnId)
              this.$router.push({name:'SellingTickets',params:{'dateInfor':dateInfor}});
            }
        },
            created(){
                 this.SceneInfor();
            }

    }
</script>

<style scoped>
  #box2{
    /*border: 1px solid blue;*/
    margin-top: 60px;
  }
  #head{
    width: 1365px;
    height: 460px;
    border: 1px solid 	#C0C0C0;
    margin-left: 20px;
    margin-top: -20px;
  }
  #movie-header{
    background: url("/static/moviePic/picback-grand.jpg");
    width: 1365px;
    height: 380px;
    /*margin-left: 20px;*/
    margin-top: -20px;
    /*border: red 1px solid;*/
    background-size:cover;
    color: white;
    font-family:微软雅黑;
  }
  #body{
    width: 1365px;
    height: 500px;
    margin-left: 20px;
    margin-top: 20px;
    border: 	#C0C0C0 1px solid;
  }
  #pic{
    width: 240px;
    height: 340px;
    float: left;
    margin-left: 100px;
    margin-top: 60px;
    border: white 5px solid;
  }
  #box1{
    float: left;
    width: 800px;
    height: 300px;
    /*border: 1px solid red;*/
    margin-top: 60px;
    margin-left: 30px;
  }
  h1{
    margin-top: -2px;
  }
  #box1 span{
    line-height: 40px;
  }
  #butt1{
    margin-left: 100px;
  }
  #butt2{
    margin-left: -6px;
  }
  .butt{
    width: 160px;
  }
</style>
